<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 第二种方法 引用本地的 -->
    <!-- <script src="./Vue.js"></script> -->
</head>
<body>
    <!-- v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。
    如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。 -->

    <!-- v-bind 指令 简写 : -->
    <div class="div">
        {{names}}
        <img v-bind:src="url" alt=""  :="imgtype" >
        <!-- v-show true显示 false 隐藏 
        v-if   效果差不多这两个  只不过v-if 是删除这个标签-->
        <div v-show:class="hid">彭于晏</div>
        <div v-if:class="hid">删除创建相当于判断</div>
    </div>
    <script>

    //    let obj = {
    //         data:function(){
    //             names:'jj'
    //         }
    //     }
        Vue.createApp({
            // es6对象简写
            data(){
                return{
                     names:'胡歌',
                    //  为img的src绑定指令，就可以直接在这里换图片地址
                     url:"https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/10b431c95413e27869ca882d38548a02.jpg?x-oss-process=image%2Fresize%2Cm_lfit%2Cw_640%2Ch_1138",
                     //  为img绑定很多指令  效果与 :width  :height 一样
                     imgtype:{
                        width:50,
                        height:100,
                     },
                    //  v-show true显示 false 隐藏
                     hid:false
                } 
            }
        }).mount('.div')
    </script>
</body>
</html>